import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ui/src/components/Header.dart';
import 'package:flutter_ui/src/components/SliverListView.dart';

class MyPage extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<MyPage> {
  double value = 0.0;
  EndReachedState state = EndReachedState.inactive;
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Header(title: '我的'),
      body: SliverListView(
        data: <String>[
          '0','1','2','0','1','2','0','1','2','0','1','2','0','1','2',
          '0','1','2','0','1','2','0','1','2','0','1','2','0','1','2'
        ],
        renderItem: (BuildContext context, dynamic item, int index ) {
          return _ListItem(name: 'name$index',place: 'place$index', date: 'date',  called: true);
        },
        onRefresh: () async {

        },
        onEndReached: () async {
          await Future.delayed(Duration(seconds: 1, milliseconds: 500));
        },
        onEndReachedStateChange: (EndReachedState endReachedState) {
          this.setState((){
            state = endReachedState;
          });
        },
        footer: SliverListViewFooter(
            state: state,
            builder: (BuildContext context, EndReachedState  state) {
              String str = "已经到底了";
              switch (state) {
                case EndReachedState.active:
                  str = "正在加载";
                  break;
                case EndReachedState.reached:
                  str = "获取数据中...";
                  break;
                default:
                  break;
              }
              return Text(str);
            }
          ),
      )
    );
  }
}




class _ListItem extends StatelessWidget {
  const _ListItem({
    this.name,
    this.place,
    this.date,
    this.called,
  });

  final String name;
  final String place;
  final String date;
  final bool called;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: CupertinoColors.white,
      height: 60.0,
      padding: const EdgeInsets.only(top: 9.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 38.0,
            margin: EdgeInsets.only(top: 10),
            child: called
                ? const Align(
              alignment: Alignment.topCenter,
              child: Icon(
                CupertinoIcons.phone_solid,
                color: CupertinoColors.inactiveGray,
                size: 28.0,
              ),
            )
                : null,
          ),
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
                ),
              ),
              padding: const EdgeInsets.only(left: 1.0, bottom: 9.0, right: 10.0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          name,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontWeight: FontWeight.w600,
                            letterSpacing: -0.18,
                          ),
                        ),
                        Text(
                          place,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 15.0,
                            letterSpacing: -0.24,
                            color: CupertinoColors.inactiveGray,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Text(
                    date,
                    style: const TextStyle(
                      color: CupertinoColors.inactiveGray,
                      fontSize: 15.0,
                      letterSpacing: -0.41,
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(left: 9.0),
                    child: Icon(
                        CupertinoIcons.info,
                        color: CupertinoColors.activeBlue
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}